系統功能
所有課程都使用讀取 file 的做法來設計。這1章與前1章說明如何透過 file 的方法來創造動態的課程,首先回顧 Ben 的學習網架構,
(1) 側邊欄為科目,包含中文,英語,日語,韓語,英日韓,其他。
(2) 科目包含課程分類,課程名稱,課程章節
以上可以看到動態的課程包含了 (1) 科目 (2) 分類 (3)課程 (4) 章節
其中第1項放在 index.html, 第2項放在 js/topic_lang.js
第3-4項都放在外部的階層及檔案,
前一章要介紹的是第1-2項,這一章介紹第3-4項
以 英語/商業/"BBC at Work" 課程為例,這是67個 Youtube 網站連結,對應到67門課。
科目分為 中文(chinese),英語(engish),日語(japan),韓語(korean),英日語(cejk),其他(learn)
課程分類的英文,請參照上節,js/topic_lang.js,
在 data/[科目]/[分類]/topics_[分類].csv 檔案中,裡面訂定所有該分類的課程
以 英語/商業/"BBC at Work" 課程為例,就要在data/english/business/topics_business.csv 中放一行如下
english,business,99,bbcWork,BBC at Work,conversation_youtube,all.csv
這一行的解讀方式是
[主題課程],[課程大分類],[最多顯示幾門課],[課程名稱],[課程型態],[課程內容]
課程內容為 all.csv, 則對應到 data/[科目]/[分類]/[課程名稱]/all.csv 檔案.
此課程為 data/english/business/bbcWork/all.csv 檔案
all.csv 檔案內容如下
1,你用英語工作嗎,https://www.youtube.com/watch?v=Aj-EnsvU5Q0
2,如何準備面試,https://www.youtube.com/watch?v=KN2jyw6D1ak
3,回答面試問題,https://www.youtube.com/watch?v=sj-dX3fZmq0
4,提出建議很容易,https://www.youtube.com/watch?v=2zyca6fGo4A
5,自我介紹,https://www.youtube.com/watch?v=1AmS9h8g3E4
...
這是67個 Youtube 網站連結,對應到67門課。
它的解讀方式是
[章節編號],[章節名稱],[youtube網址]
章節編號則對應 1.srt,是一種影片字幕檔的型態,範例如下
對應到 data/[科目]/[分類]/[課程名稱]/[章節編號].srt 檔案.
例如第1章是 data/english/business/bbcWork/1.srt
1.srt 的內容如下,是一個 srt 字幕檔,解讀方式每一行為,每一行用空白行隔開
[開始時間] --> [結束時間]
字幕
範例內容如下
1
00:00:08,069 --> 00:00:21,430
Narrator: Hi I'm Neil. Thanks for joining me on English at Work - [a new series] of programmes set in an office, full of top tips to help you learn some useful business language which you could use in the workplace.
5
00:00:21,430 --> 00:00:32,000
In the next few minutes you can join me on an introductory tour around one of London's biggest imitation plastic fruit manufacturers, called Tip Top Trading.
技術手法
此處使用了 XMLHttpRequest 的手法
var read = new XMLHttpRequest();
read.open("GET", selFile, false);
read.setRequestHeader("Cache-Control", "no-cache");
read.send();
var displayName = read.responseText;
var topicArr = displayName.replace(/\r\n/g, "\n").split("\n");
let topicCnt = topicArr.length;
let tmpCnt = 0;
語文學習07-過去與未來
1. 你上星期過得如何?我整個星期都在加班
2. 你下週六有空嗎?我下週六要去爬山
3. 〖文法〗過去式
4. 〖文法〗過去式